{% extends "base_generic.html" %}
{% block script %}
<script type="text/javascript">
function generateUrl(name) {
  var sanitizedName = string_to_slug(name);
  $("#url").val(sanitizedName);
}



function showVerbAttributes(){
    $('#attributes').show();
    $('#verb').show();
    $('#noun').hide();
    $('#preposition').hide();
}



function showNounAttributes(){
    $('#attributes').show();
    $('#noun').show();
    $('#verb').hide();
    $('#preposition').hide();
}



function showPrepositionAttributes(){
    $('#attributes').show();
    $('#noun').hide();
    $('#verb').hide();
    $('#preposition').show();
}



function showAttributes(){
  typeselect = $('#termtype');
  option = typeselect.val();
  if(option=='agpoZWFkZXJsaW5lchALEghUZXJtVHlwZRjJriMM' || option=='agpoZWFkZXJsaW5lchALEghUZXJtVHlwZRixtiMM'){
    showVerbAttributes();
  }else if(option=='agpoZWFkZXJsaW5lchALEghUZXJtVHlwZRiRlyMM'){
    showNounAttributes();
  }else if(option=='agpoZWFkZXJsaW5lchALEghUZXJtVHlwZRjawzYM'){
    showPrepositionAttributes();
  }else{
    $('#attributes').hide();
    $('#verb').hide();
    $('#noun').hide();
    $('#preposition').hide();
  }

}

$(function()
{

$('input#tagsfield').smartAutoComplete({
  source: "/gettags/{{lang}}",
  maxResults: 10,
  delay: 200,
  typeAhead: true
  });
$("input#tagsfield").bind({

           keyIn: function(ev){
             var tag_list = ev.smartAutocompleteData.query.split(","); 
             //pass the modified query to default event
             ev.smartAutocompleteData.query = $.trim(tag_list[tag_list.length - 1]);
           },

           itemSelect: function(ev, selected_item){ 
            var options = $(this).smartAutoComplete();

            //get the text from selected item
            var selected_value = $(selected_item).text();
            var cur_list = $(this).val().split(","); 
            cur_list[cur_list.length - 1] = selected_value;
            $(this).val(cur_list.join(",") + ","); 

            //set item selected property
            options.setItemSelected(true);

            //hide results container
            $(this).trigger('lostFocus');
              
            //prevent default event handler from executing
            ev.preventDefault();
          },

        });


{% ifequal term.termtype.url 'verb' %}
  showVerbAttributes();
{% endifequal %}
{% ifequal term.termtype.url 'phrasal-verb' %}
  showVerbAttributes();
{% endifequal %}
{% ifequal term.termtype.url 'noun' %}
  showNounAttributes();
{% endifequal %}
{% ifequal term.termtype.url 'preposition' %}
  showNounAttributes();
{% endifequal %}
});

</script>
<style>

    ul.smart_autocomplete_container li {list-style: none; cursor: pointer;}
    li.smart_autocomplete_highlight {background-color: #C1CE84;}
    ul.smart_autocomplete_container { margin: 10px 0; padding: 5px; background-color: #E3EBBC; }

</style>
{% endblock %}

{% block content %}
    <form name="edit-admin" id="edit-admin" method="post" action="{{path}}">
    <div id="primaryContentContainer">
      <div id="primaryContent">
      {% if error %}
      <div class="error">{{errormessage}}</div>
      {% endif %}
        <div>
          <h2>Word:</h2>
          <p><input type="text" name="word" id="word" value="{% ifnotequal prefix '' %}{{prefix}}/{% endifnotequal %}{{term.word}}" onblur="generateUrl($('#word').val())" /></p>
        </div>

        <div>
          <h2>Main meaning:</h2>
          <p><input type="text" name="translate" id="translate" value="{{term.translate}}" /></p>
          <input type="hidden" name="url" id="url" value="{{term.url}}" />
        </div>
        <div>
          <h2>Second meaning:</h2>
          <p><input type="text" name="translate2" id="translate2" value="{{term.translate2}}" /></p>
        </div>
        <div>
          <h2>Third meaning:</h2>
          <p><input type="text" name="translate3" id="translate3" value="{{term.translate3}}" /></p>
        </div>

        <div>
          <h2>Language:</h2>
          <p>{% for alanguage in languages %}
{% if forloop.first %}
<select name="language" id="language">
{% endif %}
<option value="{{alanguage.key}}" {% ifequal alanguage.url language %}selected="selected"{% endifequal %}>{{alanguage.name}}</option>
{% if forloop.last %}
</select>
{% endif %}
{% endfor %}</p>
        </div>

        <div>
          <h2>Type:</h2>
          <p>
{% for atermtype in termtypes %}
{% if forloop.first %}
<select name="termtype" id="termtype" onchange="showAttributes();">
{% endif %}
<option value="{{atermtype.key}}" {% ifequal atermtype.url termtype %}selected="selected"{% endifequal %}>{{atermtype.name}}</option>
{% if forloop.last %}
</select>
{% endif %}
{% endfor %}
          </p>
        </div>
        <div>
          <h2>Level:</h2>
          <p>
          <select id="level" name="level">
            <option value="Advanced"{% ifequal term.level 'Advanced' %} selected="selected"{% endifequal %}>Advanced</option>
            <option value="Medium"{% ifequal term.level 'Medium' %} selected="selected"{% endifequal %}>Medium</option>
            <option value="Basic"{% ifequal term.level 'Basic' %} selected="selected"{% endifequal %}>Basic</option>
          </select>
          </p>
        </div>
        <div>
          <h2>Tags:</h2>
          <p>
          <input type="text" name="tags" autocomplete="off" id="tagsfield" size="50" value="{{term.tags|join:", "}}" />
          </p>
        </div>
        <div id="attributes" style="display: none;">
          <h2>Attributes:</h2>
          <div id="verb" style="display: none;">
            <ul class="attributes">
              <li><label for="transitive">Transitive</label><input type="radio" name="transitivity" id="transitive" value="transitive"{% if term.attributes|checkattr:"transitive" %} checked="true"{% endif %}/></li>
              <li><label for="intransitive">Intransitive</label><input type="radio" name="transitivity" id="intransitive" value="intransitive"{% if term.attributes|checkattr:"intransitive" %} checked="true"{% endif %}/></li>
              <li><label for="iregular">Iregular</label><input type="radio" name="regularity" id="iregular" value="irregular"{% if term.attributes|checkattr:"iregular" %} checked="true"{% endif %}/></li>
              <li><label for="regular">Regular</label><input type="radio" name="regularity" id="regular" value="regular"{% if term.attributes|checkattr:"regular" %} checked="true"{% endif %} /></li>
              <li><label for="reflexive">Reflexive</label><input type="checkbox" name="reflexive" id="reflexive" value="reflexive"{% if term.attributes|checkattr:"reflexive" %} checked="checked"{% endif %} /></li>
            </ul>
          </div>
          <div id="noun" style="display: none;">
            <ul class="attributes">
              <li><label for="masculin">Masculine</label><input type="radio" name="gender" id="masculine" value="masculine"{% if term.attributes|checkattr:"masculine" %} checked="true"{% endif %}/></li>
              <li><label for="feminin">Feminine</label><input type="radio" name="gender" id="feminine" value="feminine"{% if term.attributes|checkattr:"feminine" %} checked="true"{% endif %}/></li>
              <li><label for="neutral">Neutral</label><input type="radio" name="gender" id="neutral" value="neutral"{% if term.attributes|checkattr:"neutral" %} checked="true"{% endif %}/></li>
            </ul>
          </div>
          <div id="preposition" style="display: none;">
            <ul class="attributes">
              <li><label for="accusative">Accusative</label><input type="radio" name="case" id="accusative" value="accusative"{% if term.attributes|checkattr:"accusative" %} checked="true"{% endif %}/></li>
              <li><label for="dative">Dative</label><input type="radio" name="case" id="dative" value="dative"{% if term.attributes|checkattr:"dative" %} checked="true"{% endif %}/></li>
              <li><label for="nominative">Nominative</label><input type="radio" name="case" id="nominative" value="nominative"{% if term.attributes|checkattr:"nominative" %} checked="true"{% endif %}/></li>
            </ul>
          </div>
        </div>
          <input type="hidden" name="url" id="url" value="{{term.url}}" />
        </div>


<div>
  <p style="text-align: right;"><input type="submit" class="btnsave" name="save" class="mainbutton" id="publish" value="Save" /></p>
</div>
      </div>
    </div>
</form>
{% endblock %}
